<template>
	<view id="prodDetailPage">
		<!-- <customer class="contract"></customer> -->
		<view class="swiper-wrapper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<image class="swiper-item" src="../../static/img/swipe-img.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="swiper-item" src="../../static/img/swipe-img.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="swiper-item" src="../../static/img/swipe-img.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-title">
			<view class="goods-name">
				A580进口高速防滑传动带
			</view>
			<view class="price">
				<text class="unit">￥</text>
				299.00
			</view>
		</view>
		<view class="prod-explain goods-title">
			<view class="goods-name">
				产品说明
			</view>
			<tab-switch :active="active" :tabs="tabs" @change="tabChange"></tab-switch>
			<view class="tab-con" v-if="current === 1" key="detail">
				<view class="tab-form">
					<view class="form-row">
						<view class="form-col">
							品牌：MITSUBOSH 尺
						</view>
						<view class="form-col">
							型号：SPA3132LW
						</view>
					</view>
					<view class="form-row">
						<view class="form-col">
							尺寸：4120(mm)
						</view>
						<view class="form-col">
							型号：SPA3132LW
						</view>
					</view>
					<view class="form-row">
						<view class="form-col">
							颜色：黑色
						</view>
						<view class="form-col">
							样式：三角带
						</view>
					</view>
				</view>
			</view>
			<view class="tab-con" v-else key="evaluate">
				<view class="evaluate">
					<image src="../../static/img/custmer.png" mode="aspectFill" class="avatar"></image>
					<view class="eval-box">
						<view class="user-name">
							布娜娜
						</view>
						<view class="reply">
							2019-08-09 12:00:00 型号：SPA3132LW
						</view>
						<view class="speak">
							产品很好，产品很好，产品很好，产品很好，产品很好，产品很好，产品很好。
						</view>
						<view class="take-photoes">
							<image src="../../static/img/rope.png" class="photo" mode="aspectFill"></image>
							<image src="../../static/img/rope.png" class="photo" mode="aspectFill"></image>
							<image src="../../static/img/rope.png" class="photo" mode="aspectFill"></image>
						</view>
						<view class="word">
							<view class="who">
								店家回复：
							</view>
							<view class="say">
								谢谢您的关注和评价，我们会再接再厉
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image v-if="current === 1" class="goods-jumbo" src="../../static/img/jumbo-img.png" mode="aspectFill"></image>
		<operation-footer :collected="collected" @telClick="telClick" @join="join" @buy="buy" @collectClick="collectClick"></operation-footer>
		<join v-if="showJoin" @close="joinClose" @join="joinClicked"></join>
		<buy v-if="showBuy" @close="buyClose" @buy="buyClicked"></buy>
		<tel-modal :visable="modalVisable" @close="modalVisable=false"></tel-modal>
		<!-- <view v-show="joinSuc">
			<operation-modal class="ope-modal-wrapper" txt="添加购物车成功" url="../../static/img/success.png"></operation-modal>
		</view> -->
		<operationModal :url="url" :txt="txt" :visable="showOpe" @close="opeModalClose"></operationModal>
	</view>
</template>

<script>
	import customer from "@/components/customer/customer.vue"
	import tabSwitch from "@/components/tab-switch/tab-switch.vue"
	import telModal from "@/components/tel-modal/tel-modal.vue"
	import operationModal from "@/components/operation-modal/operation-modal.vue"
	import operationFooter from "@/components/operation-footer/operation-footer.vue"
	import join from "@/components/join/join.vue"
	import buy from "@/components/buy/buy.vue"
	import { prodTabs } from '../../utils/data.js'
	export default {
		components: {telModal,operationModal, tabSwitch, customer, operationFooter,join,buy},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				modalVisable: false,
				tabs: prodTabs,
				active: 0,
				current: 1,
				showJoin: false,
				showOpe: false,
				showBuy: false,
				url: '../../static/img/success.png',
				txt: '添加购物车成功',
				collected: false
			}
		},
		methods: {
			tabChange(e) {
				this.current = e.key
			},
			telClick() {
				this.modalVisable = true
			},
			collectClick() {
				this.collected = !this.collected
				this.showOpe = true
				this.url = '../../static/img/success.png'
				this.txt = (this.collected ? '' : '取消') + '收藏成功'
			},
			join() {
				this.showJoin = true
			},
			joinClose() {
				this.showJoin = false
			},
			joinClicked() {
				this.showOpe = true
			},
			buy() {
				this.showBuy = true
			},
			buyClose() {
				this.showBuy = false
			},
			buyClicked() {
				uni.navigateTo({
					url: '../order/order',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			opeModalClose() {
				this.showOpe = false
			}
		}
	}
</script>

<style>
/* .contract {
	position: fixed;
	top: 36upx;
	right: 48upx;
	z-index: 999999;
} */
/* .contract-ico {
	width: 90upx;
	height: 90upx;
} */

.contract-txt {
	text-align: center;
	font-size:22upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	transform: translateY(-20upx);
}	
	
.swiper-wrapper {
	height: 550upx;
}
.swiper {
	height: 100%;
}
.swiper-item {
	height: 550upx;
	width: 750upx;
}


.goods-title {
	padding: 25upx 0 21upx 33upx;
	border-bottom: 14upx solid #F5F5F5;
}
.goods-name {
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.tab-con {
	font-size:22upx;
	font-weight:400;
	color:rgba(51,51,51,1);
	border-top: 1upx solid #E6E6E6;
}
.tab-form {
	padding-top: 18upx;
	padding-bottom: 27upx;
}
.form-row {
	display: flex;
	margin-top: 19upx;
}
.form-col {
	width: 200upx;
	flex: 1;
}
.goods-jumbo {
	width: 750upx;
	height: 818upx;
}
.evaluate {
	display: flex;
	margin: 36upx 0 0 0;
}
.avatar {
	width: 61upx;
	height: 61upx;
	flex: 1 61upx 0;
	margin-right: 20upx;
}
.eval-box {
	flex: 11 633upx 0;
	width: 633upx;
	padding-bottom: 121upx;
}
.user-name {
	font-size:28upx;
	font-weight:500;
	color:rgba(149,149,149,1);
}
.reply {
	font-size:22upx;
	font-weight:500;
	color:rgba(149,149,149,1);
	margin: 8upx 0 0 0;
}
.speak {
	font-size:28upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	line-height:37upx;
	margin-top: 27upx;
}
.take-photoes {
	margin: 23upx 0 0 0;
}
.photo {
	width: 180upx;
	height: 180upx;
	margin-right: 30upx;
}
.word {
	height: 92upx;
	width:622upx;
	background:rgba(245,245,245,1);
	font-size: 26upx;
	margin: 20upx 0 0 0;
	display: flex;
	align-items: center;
	padding: 0 28upx 0 25upx;
	box-sizing: border-box;
}
.who {
	color: #959595;
	display: inline-block;
	min-width: 130upx;
}
.say {
	color: #333333;
	display: inline-block;
}

.jumbo-img {
	height: 710upx;
}

.ope-modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
}
</style>
